<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学生信息</title>
	<link rel="stylesheet" href="/css/common2.css">
	<style>
		.search_img {
			position: absolute;
			right: 3%;
		}

		.long-background-img {
			width: 165px;
			height: 35px;
			margin-left: 2%;
			background-size: 165px 35px;
		}
	</style>
</head>

<body>
	<div id="vue-root">
		<div class="add">
			<a :href="'bus_passenger_item.html?id='+tripId" style="color: white">添加学生</a>
		</div>
		<div class="refresh action-buttons" onclick="location.reload()">刷新</div>
		<!-- <input placeholder="请输入学生姓名" class="search search_student" v-model="name"
			style="position: absolute; right: 255px; max-width: 120px;height: 33px;">
		<select class="search class" style="position: absolute; right: 100px;" v-model="classes">
			<option value="">请选择班级</option>
			<option v-for="classes in classess" :key="classes" :value="classes" v-text="classes">
			</option>
		</select>
		<img src="/image/search.png" height="35" width="35" class="search_img" @click="search0"> -->
		<div class="center">
			<div class="table">
				<table class="table_top">
					<thead>
						<tr>
							<th class="one">
								<input type="checkbox" class="check-box" v-model="all">序号
							</th>
							<th class="three">班级</th>
							<th class="three">姓名</th>
							<th class="three">删除</th>
						</tr>
					</thead>
					<tbody id="list">
						<tr v-for="(student,index) in list" :key="student.id">
							<td class="one">
								<input type="checkbox" class="check-box" v-model="student.checked">
								<span v-text="index+1"></span>
							</td>
							<td class="three" v-text="student.classesName"></td>
							<td class="three" v-text="student.studentName"></td>
							<td class="three">
								<div class="option">
									<div class="delete-icon option-icon"
										style="right: 20%; top:30%;position: absolute;">
										<img class="img" src="/image/delete.png" height="20" width="20"
											onmouseover="this.src='/image/delete_light.png'"
											onmouseout="this.src='/image/delete.png'" @click="del([student.studentId])">
									</div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="delete long-background-img" @click="exports">批量导出（或下载模板）</div>
			<label for="file">
				<div class="delete" style="margin-left:10px;">批量导入</div>
			</label>
			<div class="delete" style="margin-left:10px;" @click="batchDelete">批量删除</div>
		</div>
		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>

		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>

	<script>
		var tripId = params().id;

		var app = new Vue(merge({
			data: {
				urls: {
					del: '/pc/trip/passenger/del/' + tripId,
					list: '/pc/trip/passenger/' + tripId,
					imports: '/pc/trip/import/' + tripId
				},
				name: '',
				classes: '',
				classess: []
			},
			methods: {
				exports: function () {
					location.href = '/pc/trip/export/' + tripId
				},
				search0: function () {
					this.list = this.list0.filter(function (it) {
						return (!this.classes || it.classesName == this.classes) &&
							it.studentName.indexOf(this.name) >= 0;
					}.bind(this));
				}
			},
			computed: {
				checkedIds: function () {
					return this.list.filter(function (it) {
						return it.checked;
					}).map(function (it) {
						return it.studentId;
					});
				}
			}
		}));
	</script>

</body>

</html>